<template>
  <div class="series-main">
    <el-card class="card box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索栏</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="find.cname"
            size="small"
            placeholder="根据用户名进行查询"
          />
        </el-col>

        <el-col :span="6">
          <el-input
            v-model="find.tel"
            size="small"
            placeholder="根据电话进行查询"
          />
        </el-col>

        <el-col :span="6" :offset="3">
          <el-button size="small">重置</el-button>
          <el-button type="primary" size="small" @click="doFind">查询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <div class="container card">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <!-- <span>卡片名称</span> -->
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
          <el-button type="primary" size="small" disabled @click="add">新增</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="seriesAllList"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            label="#"
            type="index"
            width="50"
          />
          <!-- <el-table-column prop="date" label="日期" width="150"></el-table-column> -->

          <el-table-column label="头像" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.cover_img">
            </template>
          </el-table-column>
          <el-table-column label="用户名" prop="cname" width="180" />
          <el-table-column prop="ename" label="昵称" width="180" />
          <el-table-column
            prop="tel"
            label="电话"
            width="200"
          />

          <el-table-column
            prop="descr"
            label="描述"
            width="220"
          />

          <el-table-column prop="addTime" label="注册时间" width="120" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleClick(scope)"
              >删除</el-button>
              <el-button
                type="text"
                size="small"
                @click="edit(scope.row.id)"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <!-- <span class="demonstration">分页</span> -->
          <el-pagination
            :current-page="page.start"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import { seriesAllList } from '@/api/series'
export default {
  name: 'SeriesList',
  data() {
    return {
      loading: false,
      seriesAllList: [],
      find: {
        cname: '',
        tel: ''
      },
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0
      }
    }
  },
  created() {
    this.getSeriesList()
  },
  methods: {
    getSeriesList() {
      seriesAllList(
      ).then(res => {
        console.log(res)
        res.data.forEach(item => {
          item.tel = '13087578439'
        })
        this.seriesAllList = res.data
        console.log(this.seriesAllList)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.limit = val
      this.getSeriesList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.start = val
      this.getSeriesList()
    },
    doFind() {
      // this.page.start = 1;
      this.getSeriesList()
    },
    // 新增
    add() {

    }
  }
}
</script>

<style lang="scss" scoped>
    .card {
        margin: 30px;
    }
    img{
        width:100px;
        height: 100px;
    }
    .block{
        text-align:right;
        margin:20px;
    }
</style>
